<template>
  <div>
    {{money}}
    <div>
      <!-- 1.给按钮绑定点击事件
      2.修改money ++

      v-on 指令：绑定事件
      语法：
      v-on：事件名="少量代码"
      v-on：事件名="事件处理函数" 
      v-on：事件名="事件处理函数(实参)"
      简写：@事件名="事件处理函数"
      -->
      <button v-on:click="money++">+1</button>
      <button v-on:click="addMoney">+10</button>
      <!-- 注意:传统理解中，函数名()表示调用该函数 -->
      <!-- 但是在此处，不是调用函数，而是绑定事件，当事件触发时传入指定的参数 -->
       <button @click="addCMoney(2)">+2</button>
       <button @click="addCMoney(20)">+20</button>
    </div>
  </div>
</template>

<script>
export default {
  //定义数据
  data() {
    return {
     money:100
    }
  },
  //定义方法
  methods:{
    addMoney(){
      //判断如果money到200了就不允许继续加了
      if(this.money >=200) return

      //在函数中如何使用 data中的数据
      //可以通过this.访问
      this.money+=10
    },
    addCMoney(num){
      this.money+=num
    }
  }
};
</script>

<style>
</style>